import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.redAccent, //按钮字体颜色
              surfaceVariant: Colors.orange,
              secondary: Colors.yellowAccent,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.green, //边框按钮边框颜色
              outlineVariant: Colors.amber,
              onError: Colors.yellow,
              onPrimary: Colors.redAccent,
              onSecondary: Colors.blueAccent,
              onSurface: Color.fromARGB(255, 54, 54, 184),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: Scaffold(
        appBar: AppBar(title: const Text("P31"), centerTitle: true),
        body: const LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Wrap(
        alignment: WrapAlignment.center,
        // direction: Axis.vertical,//默认水平
        spacing: 20, //水平间距
        runSpacing: 10, //垂直间距
        children: [
          Button("第1集", onPressed: () {
            print("第1集");
          }),
          Button("第2集", onPressed: () {
            print("第2集");
          }),
          Button("第3集", onPressed: () {
            print("第3集");
          }),
          Button("第4集", onPressed: () {
            print("第4集");
          }),
          Button("第5集", onPressed: () {
            print("第5集");
          }),
          Button("第6集", onPressed: () {
            print("第6集");
          }),
          Button("第7集", onPressed: () {
            print("第7集");
          }),
          Button("第8集", onPressed: () {
            print("第8集");
          }),
          Button("第9集", onPressed: () {
            print("第9集");
          }),
          Button("第10集", onPressed: () {
            print("第10集");
          }),
          Button("第11集", onPressed: () {
            print("第11集");
          }),
          Button("第12集", onPressed: () {
            print("第12集");
          }),
          Button("第13集", onPressed: () {
            print("第13集");
          }),
          Button("第14集", onPressed: () {
            print("第14集");
          }),
          Button("第15集", onPressed: () {
            print("第15集");
          }),
          Button("第16集", onPressed: () {
            print("第16集");
          }),
          Button("第17集", onPressed: () {
            print("第17集");
          }),
          Button("第18集", onPressed: () {
            print("第18集");
          }),
          Button("第19集", onPressed: () {
            print("第19集");
          }),
          Button("第20集", onPressed: () {
            print("第20集");
          }),
          Button("第21集", onPressed: () {
            print("第21集");
          }),
        ],
      ),
    );
  }
}

//自定义按钮组件
// ignore: must_be_immutable
class Button extends StatelessWidget {
  String text;
  void Function()? onPressed;

  Button(this.text, {super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(
              const Color.fromARGB(115, 245, 238, 238)),
          foregroundColor: MaterialStateProperty.all(Colors.black45)),
      onPressed: onPressed,
      child: Text(text),
    );
  }
}
